<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼图</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <script>
    let mCharts = echarts.init(document.getElementById('echarts'))
    var pieData = [
      {
        name: '淘宝',
        value: 11231
      },
      {
        name: '京东',
        value: 22673
      },
      {
        name: '唯品会',
        value: 6123
      },
      {
        name: '1号店',
        value: 8989
      },
      {
        name: '聚美优品',
        value: 6700
      }
    ]
    const option = {
      series: [
        {
          type: 'pie',
          naem: '饼图',
          data: pieData,
          //饼图文字的显示
          label: {
            show: true,//是否显示文字
            // formatter:'hhh' //具体显示的内容
            formatter: function (arg) {
              console.log(arg);
              return `${arg.data.name} ${arg.data.value}元 \n ${arg.percent}%`
            }
          },
          // 饼图的半径(控制饼图的大小)   
          // radius: 20
          // radius:'50%' //百分比参照的是元素宽度或高度较小的值来计算的
          // radius:['50%','100%'] // 外半径  内半径
          // roseType: 'radius',//南丁格尔图 半径随份额变化
          selectedMode: 'single', //选中效果 偏离圆点一小段距离
          // selectedMode: 'multiple', //选中效果 不会自动偏移回去
          selectedOffset:30 //偏移量

        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>